import React from 'react';
import {Image, Modal, ScrollView, StyleSheet, TouchableOpacity, View,} from 'react-native';
import ImageViewer from 'react-native-image-zoom-viewer';
import {NormalLine} from "../widget/lineitem/NormalLine";

const imageJS           = require('../../../img/iu.jpg');
const imageSD           = 'file:///storage/emulated/0/iu.jpg';
const imageSD1          = 'file:///sdcard/iu.jpg';
const imageDrawable     = 'hanenjing';
const imageAssets       = 'asset:/hanxiaozhu.jpg';
const imageNet          = 'http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg';

export default class PageImageSource extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isShow: false,
            images: [{
                url: imageNet,
                props: {    // Pass props to <Image />.
                    // headers: ...
                }
            },],
        }
    }

    render() {
        let IvNet = {
            uri: imageNet
        };

        let IvSD = {
            uri: imageSD
        };

        let IvDrawable = {
            uri: imageDrawable
        };

        let IvAssets = {
            uri: imageAssets
        };
        return (
            <ScrollView>
                <View style={styles.container}>

                    <NormalLine title={"加载JS图片"}/>
                    <Image
                        style={{width:100,height:150,}}
                        resizeMode={Image.resizeMode.contain}
                        source={imageJS}/>

                    <NormalLine title={"加载网络图片"}/>
                    <Image
                        style={{width:200,height:150,}}
                        resizeMode={Image.resizeMode.contain}
                        source={IvNet}/>

                    <NormalLine title={"加载SD图片"}/>
                    <Image
                        style={{width:200,height:150,}}
                        resizeMode={Image.resizeMode.contain}
                        source={IvSD}/>

                    <NormalLine title={"加载Drawable图片"}/>
                    <Image
                        style={{width:200,height:150,}}
                        resizeMode={Image.resizeMode.contain}
                        source={IvDrawable}/>

                    <NormalLine title={"加载Assets图片"}/>
                    <Image
                        style={{width:200,height:150,}}
                        resizeMode={Image.resizeMode.contain}
                        source={IvAssets}/>


                    <TouchableOpacity
                        onPress={() => this._setModelVisible(true, 1)}>
                        <NormalLine title={"点击加载网络图片"}/>
                    </TouchableOpacity>

                    <TouchableOpacity
                        onPress={() => this._setModelVisible(true, 2)}>
                        <NormalLine title={"点击加载存储卡图片"}/>
                    </TouchableOpacity>

                    <Modal visible={this.state.isShow} transparent={true} onRequestClose={() => {this._setModelVisible(false, 1)}}>
                        <ImageViewer imageUrls={this.state.images}/>
                    </Modal>
                </View>
            </ScrollView>
        );
    }

    _setModelVisible(visible:boolean, imageSource:number){
        if(imageSource === 1){      // 网络图片
            this.setState({
                isShow : visible,
                images: [{
                    url: imageNet,
                    props: {    // Pass props to <Image />.
                        // headers: ...
                    }
                },],
            });
        }
        else if(imageSource === 2){ // 本地图片
            this.setState({
                isShow : visible,
                images: [{
                    url: imageSD,
                    props: {    // Pass props to <Image />.
                        // headers: ...
                    }
                },],
            });
        }
        // ToastAndroid.show ('123', ToastAndroid.SHORT);
    }
}

//样式定义
const styles = StyleSheet.create({
    container: {
        flexDirection: 'column',
        // alignItems: 'center',
        // justifyContent: 'center',
    },
    pic1: {
        width:95,
        maxHeight: 150,
        resizeMode:Image.resizeMode.cover,
    },
});


